import { View } from "@tarojs/components";
import { AtTabBar } from "taro-ui";
import { useDispatch, useSelector } from "react-redux";
import Taro from '@tarojs/taro'

import "./index.scss";

function CustomTabBar() {
    const tabber = useSelector((state: { tabber: { current: number, visible: boolean } }) => state.tabber);
    const dispatch = useDispatch();
    function handleClick(val: number) {
        dispatch({ type: "SETCURRENT", val });
        let url: string = "";
        switch (val) {
            case 0:
                url = "/pages/wardrobe/index";
                break;
            case 1:
                url = "/pages/collection/index";
                break;
            case 2:
                url = "/pages/calender/index";
                break;
            case 3:
                url = "/pages/account/index";
                break;
        }
        Taro.switchTab({ url });
    }
    return (
        <View>
            {
                tabber.visible &&
                <AtTabBar
                    fixed
                    tabList={[
                        { title: "衣橱", iconType: "bookmark" },
                        { title: "搭配", iconType: "menu" },
                        { title: "日历", iconType: "calendar" },
                        { title: "我的", iconType: "user" },
                    ]}
                    current={tabber.current}
                    onClick={(v) => handleClick(v)}
                />
            }
        </View>
    );
}

export default CustomTabBar;
